<template>
  <div class="d-steps d-steps-vertical">
    <div v-for="(item, i) in steps" :key="'' + i + item.id" :class="getNavClass(item)" class="d-steps-item">
      <div class="d-steps-nav">
        <div class="d-steps-line"></div>
        <div class="d-steps-icon">{{ i + 1 }}</div>
      </div>
      <div class="d-steps-content">
        <div class="d-steps-head">
          <div class="d-head-text">
            <slot name="head" v-bind:scope="item">{{ item.name || '' }}</slot>
          </div>
          <slot name="head-content" v-bind:scope="item"></slot>
        </div>
        <div class="d-steps-sub">
          <div class="d-sub-text">
            <slot name="sub" v-bind:scope="item">{{ item.sub || '' }}</slot>
          </div>
          <slot name="sub-content" v-bind:scope="item"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 步骤数据
    steps: {
      type: Array,
      default () {
        return []
      }
    },
    // 状态Key
    statusKey: {
      default: 'status'
    }
  },

  model: {
    prop: 'steps'
  },

  data () {
    return {

    }
  },

  methods: {
    getNavClass (item) {
      item = item || {}
      let key = this.statusKey
      let value = item[key]
      return {
        'd-steps-primary': value === 'primary',
        'd-steps-success': value === 'success',
        'd-steps-warning': value === 'warn',
        'd-steps-danger': value === 'danger',
        'd-steps-disabled': value === 'disabled',
        'd-hide': item.isHide
      }
    }
  },

  beforeMount () {

  },

  mounted () {

  }
}
</script>

<style lang="less" scoped>
.d-steps {
  .d-steps-item {
    &.d-hide {
      display: none;
    }
  }
  .d-steps-line {
    position: absolute;
    border-color: inherit;
    background-color: #c0c4cc;
  }
  .d-steps-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
    transition: .15s ease-out;
  }
  .d-steps-item:last-of-type {
    .d-steps-line {
      display: none;
    }
  }
  .d-head-text {
    line-height: 24px;
    font-size: 16px;
  }
  .d-sub-text {
    line-height: 16px;
    font-size: 12px;
    color: #666;
  }
  .d-steps-primary {
    .d-steps-icon {
      border-color: #439EFF;
      color: #439EFF;;
    }
    .d-head-text {
      color: #439EFF;;
    }
  }
  .d-steps-success {
    .d-steps-icon {
      border-color: #69C13D;
      color: #69C13D;;
    }
    .d-head-text {
      color: #69C13D;;
    }
  }
  .d-steps-warn {
    .d-steps-icon {
      border-color: #E7A43D;
      color: #E7A43D;;
    }
    .d-head-text {
      color: #E7A43D;;
    }
  }
  .d-steps-danger {
    .d-steps-icon {
      border-color: #F66D6F;
      color: #F66D6F;;
    }
    .d-head-text {
      color: #F66D6F;;
    }
  }
  .d-steps-disabled {
    .d-steps-icon {
      border-color: #999;
      color: #999;;
    }
    .d-head-text {
      color: #999;;
    }
  }
}
.d-steps-vertical {
  .d-steps-item {
    display: flex;
    flex-grow: 0;
  }
  .d-steps-nav {
    position: relative;
    min-width: 24px;
    .d-steps-line {
      width: 2px;
      top: 0;
      bottom: 0;
      left: 11px;
    }
    .d-steps-icon {
      border-radius: 50%;
      border: 2px solid;
      border-color: inherit;
    }
  }
  .d-steps-item:last-of-type {
    .d-steps-content {
      min-height: 24px;
      padding-bottom: 0;
    }
  }
  .d-steps-content {
    flex: 1;
    padding-left: 8px;
    padding-bottom: 8px;
    min-height: 128px;
  }
}
</style>
